<style lang="less">
@import "./home.less";
</style>
<template>
  <div class="home-page">
    <div class="user-info">
      <Row>
        <span class="user-name">{{ getGreeting() }}，{{ user.userName }} </span>
        <span class="ip">{{ $t('module.home.lastLoginIP') }}：{{ userInfor.lastLoginAddress ? userInfor.lastLoginAddress :
          '--' }}</span>
      </Row>
      <Row>
        <span>{{ $t('module.home.loginTime') }}：{{ userInfor.lastLoginTime ? userInfor.lastLoginTime : '--' }}</span>
      </Row>
    </div>
    <div class="apps-title"><span>平台入口</span></div>
    <div class="apps">
      <Row :gutter="16">
        <Col span="6" v-for="(item, index) in apps" :key="index">
        <Card class="card">
          <div>
            <img :src="item.icon">
            <h3>{{ item.appName }}</h3>
            <p>{{ item.desc }}</p>
            <a :href="item.actionUrl" :target="item.actionUrl !== '#' ? '_blank' : '_self'">立即进入-></a>
          </div>
        </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";
import { getInfor } from "@/api/homeApi.js";

const actionUrlMap = {
  development: {
    // 应用端: http://signon.dadp-uat.crcloud.com/static/signon/index.html
    // 设计端: http://designer.dadp-uat.crcloud.com/des/#/login
    // 管理端: http://domain.dadp-uat.crcloud.com/static/domain/#/login
    lowCodeDev: {
      actionUrl: 'http://designer.dadp-uat.crcloud.com/des/#/login',
      desc: ''
    },
    lowCodeManage: {
      actionUrl: 'http://domain.dadp-uat.crcloud.com/static/domain/#/login',
      desc: ''
    },
    formDesignerDev: {
      appName: '',
      actionUrl: 'http://ripples-online-ui-dev.dadp-fat.crcloud.com',
      desc: ''
    },
    reportForms: {
      actionUrl: 'http://onlinereport.dadp-fat.crcloud.com/rpt-server/login.html',
      desc: ''
    },
    flowPlatform: {
      actionUrl: 'http://flowable.dadp-uat.crcloud.com/static/adminFlowableLogin.html',
      desc: ''
    }
  },
  production: {
    lowCodeDev: {
      actionUrl: 'http://designer.dadp-uat.crcloud.com/des/#/login',
      desc: ''
    },
    lowCodeManage: {
      actionUrl: 'http://domain.dadp-uat.crcloud.com/static/domain/#/login',
      desc: ''
    },
    formDesignerDev: {
      appName: '',
      actionUrl: 'http://ripples-online-ui-dev.dadp-fat.crcloud.com',
      desc: ''
    },
    reportForms: {
      actionUrl: 'http://onlinereport.dadp-fat.crcloud.com/rpt-server/login.html',
      desc: ''
    },
    flowPlatform: {
      actionUrl: 'http://flowable.dadp-uat.crcloud.com/static/adminFlowableLogin.html',
      desc: ''
    }
  }
};

export default {
  mixins: [locales],
  data() {
    return {
      apps: [{
        appKey: 'lowCodeDev',
        icon: require('../../asset/images/icon_home_low_code_tl.png'),
        appName: '低代码开发',
        desc: '可视化构建企业管理类轻量级应用系统，安全性高，组件丰富，降低人员技术要求，缩短项目交付周期。',
        actionUrl: '#'
      }, {
        appKey: 'lowCodeManage',
        icon: require('../../asset/images/icon_home_low_code_tl.png'),
        appName: '低代码发布管理',
        desc: '为租户管理员提供专业的低代码型软件发布管理服务；快速部署上线为应用，为管理者提供应用内授权、配置、调试、监控等提供完整治理能力。',
        actionUrl: '#'
      }, {
        appKey: 'formDesignerDev',
        icon: require('../../asset/images/icon_home_low_code_dadp.png'),
        appName: '表单开发',
        desc: '服务于开发、设计人员快速进行表单设计与数据模型设计，即发布即可见效果。对应业务需求初期原型交付，提供快速可用的业务数据基础操作与展示。',
        actionUrl: '#'
      }, {
        appKey: 'reportForms',
        icon: require('../../asset/images/icon_home_report.png'),
        appName: '报表开发',
        desc: '用于开发可视化WEB类自定义报表、网格类报表、大屏类报表提供快速实施工具，帮助企业打造更专业的报表软件平台，让用户体验更简单。',
        actionUrl: '#'
      }, {
        appKey: 'flowPlatform',
        icon: require('../../asset/images/icon_home_flow.png'),
        appName: '流程开发',
        desc: '专业的流程开发平台。融合BPMN2.0标准、轻量可扩展的流程引擎、全流程管理，零代码配置，全拖拽式流程设计，适配流程集成化场景与企业流程中心场景。',
        actionUrl: '#'
      }],
      userInfor: {},
      remoteApps: {}
    };
  },
  computed: {
    user() {
      return this.$store.state[CoreModuleName].userInfo;
    }
  },
  created() {
    this.initActionUrl();
  },
  mounted() {
    this.getInfor();
  },
  methods: {
    // 获取个人信息
    async getInfor() {
      let res = await getInfor();
      this.userInfor = res.data;
      console.log(this.userInfor);
    },
    getGreeting() {
      var dt = new Date();
      var hour = dt.getHours();
      var format = '您好';
      if (hour < 6) { //凌晨
        format = this.$t('module.home.earlyMorning');
      } else if (hour < 12) { //上午
        format = this.$t('module.home.goodMorning');
      } else if (hour == 12) { //中午
        format = this.$t('module.home.goodMidday');
      } else if (hour <= 17) { //下午
        format = this.$t('module.home.goodAfternoon');
      } else {//晚上
        format = this.$t('module.home.goodEvening');
      }
      return format;
    },
    initActionUrl() {
      const curtEnv = process.env.NODE_ENV;
      //以Nacos 远端为主
      this.remoteApps = window.RPConfig.homeApps;

      var appMap = {};
      if (this.remoteApps !== null && this.remoteApps !== undefined) {
        appMap = this.remoteApps;
      } else {
        appMap = actionUrlMap[curtEnv];
      }
      // console.log(this.remoteApps);
      // console.log(appMap);

      for (const app of this.apps) {
        const { appKey } = app;
        if (appKey in appMap) {
          var item = appMap[appKey];
          if (item.actionUrl) {
            app.actionUrl = item.actionUrl;
          }
          if (item.desc) {
            app.desc = item.desc;
          }
          if (item.appName) {
            app.appName = item.appName;
          }
        }
      }
      // console.log(this.apps);
    }
  }
};
</script>
<style lang="less">
.home-page {
  padding: 20px;
  background-color: #fff;

  .user-info {
    width: 100%;
    padding: 24px 32px;
    padding-bottom: 8px;
    margin: 0px;
    background: url(../../asset/images/home_header_bg.png) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;


    .user-name {
      font-weight: 500;
      font-size: 24px;
      color: #12151B;
    }

    .ip {
      margin-left: 17px;
      margin-top: 8px;
      margin-bottom: 8px;
      background: rgba(133, 139, 156, 0.2);
      border-radius: 2px;

      font-size: 12px;
      color: #666F83;
      letter-spacing: 0;
      padding-top: 8px;
      font-weight: 400;
      padding: 0 8px;
      line-height: 20px;
    }

    .loginTime {
      font-size: 14px;
      color: #858B9C;
      letter-spacing: 0;
    }
  }

  .apps-title {
    margin-top: 32px;
    width: 100%;
    background-color: #fff;
    padding-bottom: 8px;
  }

  .apps {
    width: 100%;
    padding-bottom: 8px;

    .card {
      background: #F5F7FA;
      border-radius: 8px;
      text-align: center;
      width: 100%;
      height: 274px;
      position: relative;
      margin-bottom: 20px;

      &:hover {
        a {
          opacity: 1;
        }
      }

      p {
        margin-top: 9px;
        padding: 0 38px;
        text-align: left;
        font-size: 13px;
        color: #858B9C;
        letter-spacing: 0;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      img {
        width: 54px;
        height: 54px;
        margin-top: 55px;
      }

      h1 {
        margin-top: 18px;
        font-size: 18px;
        color: #12151B;
        letter-spacing: 0;
        text-align: center;
        font-weight: 500;
      }

      a {
        text-align: right;
        color: #000;
        opacity: 0;
        display: display;
        font-size: 14px;
        color: #FF7B0F;
        letter-spacing: 0;
        font-weight: 400;
        width: 200px;
        height: 30px;
        position: absolute;
        bottom: 12px;
        right: 48px;
      }
    }
  }

}
</style>